'use client';

import {MagnifyingGlassIcon} from '@heroicons/react/24/outline';
/**
 * useSearchParams- Allows you to access the parameters of the current URL.
 *      For example, the search params for this URL /dashboard/invoices?page=1&query=pending would look like this: {page: '1', query: 'pending'}.
 * usePathname - Lets you read the current URL's pathname.
 *      For example, for the route /dashboard/invoices, usePathname would return '/dashboard/invoices'.
 * useRouter - Enables navigation between routes within client components programmatically. There are multiple methods you can use.
 */
import {useSearchParams, usePathname, useRouter} from 'next/navigation';
/**
 * Debouncing is a programming practice that limits the rate at which a function can fire.
 * It prevents a new database query on every keystroke.
 * In our case, you only want to query the database when the user has stopped typing.
 */
import {useDebouncedCallback} from 'use-debounce';

export default function Search({placeholder}: { placeholder: string }) {
    const searchParams = useSearchParams();
    const pathname = usePathname();
    const {replace} = useRouter();

    const handleSearch = useDebouncedCallback((term) => {
        console.log(`Searching... ${term}`);
        /**
         * URLSearchParams is a Web API that provides utility methods for manipulating the URL query parameters.
         * Instead of creating a complex string literal, you can use it to get the params string like ?page=1&query=a.
         */
        const params = new URLSearchParams(searchParams);
        params.set('page', '1');
        /**
         * Next, set the params string based on the user’s input.
         * If the input is empty, you want to delete it:
         */
        if (term) {
            params.set('query', term);
        } else {
            params.delete('query');
        }
        /**
         * As the user types into the search bar, params.toString() translates this input into a URL-friendly format.
         * replace(${pathname}?${params.toString()}) updates the URL with the user's search data.
         * For example, /dashboard/invoices?query=lee if the user searches for "Lee".
         */
        replace(`${pathname}?${params.toString()}`);
    }, 300);

    return (
        <div className="relative flex flex-1 flex-shrink-0">
            <label htmlFor="search" className="sr-only">
                Search
            </label>
            <input
                className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
                placeholder={placeholder}
                onChange={(e) => {
                    handleSearch(e.target.value);
                }}
                defaultValue={searchParams.get('query')?.toString()}
            />
            <MagnifyingGlassIcon
                className="absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900"/>
        </div>
    );
}